<template>
  <view class="home">
    <headerss title='订单详情'></headerss>

    <!--  -->
    <view class="content">
      <view class="title">长清大学生红叶谷汉服真人秀开团</view>
      <view class="details">
        <image src="../../static/imgs/Rectangle 548.png" mode=""></image>
        <view class="address">
          <view class="">集合地点：长清大学城</view>
          <view class="">项目内容：提供汉服一套、写真一组</view>
          <view class="">使用时间：2023月8日1</view>
          <view class="" style="color: #EF5353;">使用前24小时内不可退</view>
        </view>
      </view>
      <view class="notification">
        <view class="">活动须知：</view>
        <view class="">1.限购3人</view>
        <view class="">2.购买后距离活动时间开始前24小时内不可退款</view>
      </view>
    </view>

    <!-- 跟团人数： -->
    <view class="number">
      <view class="">跟团人数：</view>
      <view class="">
        <u-icon name="minus-circle-fill" color="#DCDCDC" size="36" @click='subNumber()'></u-icon>
        <text class="people_number">{{number}}</text>
        <u-icon name="plus-circle-fill" color="#FDCC16" size="36" @click='addNumber()'></u-icon>
      </view>
    </view>


    <!-- 请选择跟团人员的信息 -->
    <view class="message" @click="show=true">
      <u-icon name="plus-circle-fill" color="#FDCC16" size="36"></u-icon>
      <text>请选择跟团人员的信息</text>
    </view>

    <!-- 选择之后 -->
    <view class="peoples">
      <view class="peopleList" v-for="(item,index) in list2">
        <view class="people" @click="tkedit(index)">
          <view class="name">{{item.name}}</view>
          <view class="sfzh">{{item.sfzh.substring(0, 4) + '***********' + item.sfzh.substring(14)}}</view>
        </view>
        <view class="listimage">
          <image src="../../static/imgs/Slice77.png" mode="" @click="delitem(index)">
          </image>
        </view>
      </view>
    </view>

    <!-- 其他项目 -->
    <view class="other">
      <view class="others">其他项目</view>
      <view class="Recommended" v-for="(item,index) in list">
        <image src="../../static/imgs/Slice 80.png" mode=""></image>
        <view class="other_content">
          <view>
            <view style="font-weight: 600;">{{item.name}}</view>
            <view style="font-size: 24rpx;color: #666666;margin-top: 5rpx;">可选择30张精修成册</view>
          </view>
          <view class="price">
            ￥<text>{{(item.price*number).toFixed(1)}}</text>
            <u-checkbox-group @change='checkboxChange'>
              <u-checkbox v-model="item.checked" :name="item.price" shape="circle" active-color="red"></u-checkbox>
            </u-checkbox-group>

          </view>
        </view>
      </view>
    </view>

    <!-- 支付 -->
    <view class="payment">
      <view class="price1">
        ￥<text>{{totalPrice }}</text>
      </view>
      <view class="button">
        <button>立即支付</button>
      </view>
    </view>

    <!-- 选择人员信息弹出层 -->
    <u-popup v-model="show" mode="bottom" length="60%" border-radius="20">
      <view class="popup_content">
        <view class="popup_add" @click="adduser()">
          <u-icon name="plus-circle-fill" color="#FDCC16" size="36"></u-icon>
          <text>添加跟团人员信息</text>
        </view>
        <!-- 没有人员信息显示 -->
        <view class="nonemessage" v-if="false">
          暂无信息
        </view>
        <!-- 人员信息显示 -->
        <view class="item" v-for="(item,index) in list1">
          <u-checkbox-group>
            <u-checkbox v-model="item.checked" :name="item.name" shape="circle"></u-checkbox>
          </u-checkbox-group>
          <view class="user">
            <view class="name">{{item.name}}</view>
            <view class="Id_number">{{item.sfzh.substring(0, 4) + '***********' + item.sfzh.substring(14)}}</view>
          </view>
          <view class="controls">
            <image src="../../static/imgs/Slice77@2x.png" mode="" @click="tkdel(index)"></image>
            <image src="../../static/imgs/Slice78@2x.png" mode="" @click="tkedit(index)"></image>
          </view>
        </view>

        <button class="verify" @click="addpepol()">确定</button>
      </view>
    </u-popup>

    <!-- 添加跟团人员弹框 -->
    <u-popup v-model="show1" mode="bottom" length="45%" border-radius="20">
      <view class="user_information">
        <view class="user_content">
          <text>名字</text>
          <input v-model="profile.name" type="text" placeholder='请输入名字'>
        </view>
        <view class="user_content">
          <text>手机号</text>
          <input v-model="profile.phone" type="text" placeholder='请输入手机号'>
        </view>
        <view class="user_content">
          <text>身份证号</text>
          <input v-model="profile.sfzh" type="text" placeholder='请输入身份证号'>
        </view>
        <view class="user_content">
          <text>详细地址</text>
          <!-- <input style="height: 110rpx;" v-model="adress" type="textarea" placeholder='请输入详细地址'> -->
          <textarea style="height: 90rpx;" v-model="profile.adress" placeholder='请输入详细地址'></textarea>
        </view>
        <view class="remark">
          注：添加身份证可购买保险，不添加不购买保险
        </view>
        <button class="save">保存</button>
      </view>
    </u-popup>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        show: false, // 选择人员信息弹出层
        show1: false, // 添加跟团人员弹框
        checked: [], // 其他项目选择
        radio2: 0, // 添加跟团人信息弹出层选择
        number: 1, //跟团人数
        // totalPrice: 0, // 总价格
        // 添加跟团人信息
        profile: {
          name: '', // 名字
          phone: '', // 手机号
          sfzh: '', // 身份证号
          adress: '', // 地址
        },
        // 其他项目列表
        list: [{
            name: '写真一套',
            price: 199,
            checked: false,
          },
          {
            name: '衣服一套',
            price: 1199,
            checked: true,
          },
          {
            name: '赛马一次',
            price: 11199,
            checked: false,
          }
        ],
        // 选择跟团人信息列表
        list1: [{
            name: '朱文帅1',
            checked: false,
            sfzh: '371327200003186661',
          },
          {
            name: '朱文帅2',
            checked: false,
            sfzh: '371327200003186661',
          },
          {
            name: '朱文帅3',
            checked: false,
            sfzh: '371327200003186661',
          },
          {
            name: '朱文帅4',
            checked: false,
            sfzh: '371327200003186661',
          },
          {
            name: '朱文帅5',
            checked: false,
            sfzh: '371327200003186661',
          },
        ],
        // 选择之后显示列表
        list2: [],

      }
    },
    computed: {
      totalPrice() {
        // 使用计算属性来筛选出checked为true的项并进行计算
        return this.list.reduce((total, item) => {
          if (item.checked) {
            return total + item.price * this.number;
          } else {
            return total;
          }
        }, 0);
      }
    },
    methods: {
      // 选中某个复选框时，由checkbox时触发
      checkboxChange(e) {

        //   this.list.forEach((item) => {
        //     if (item.checked) {
        //       this.totalPrice = item.price * this.number
        //     }
        //   })
        //   console.log(this.totalPrice);
      },
      // 添加跟团人
      addpepol() {

        // console.log(this.list1);
        this.list2 = this.list1.filter((item) => {
          return item.checked === true
        })
        if (this.number != this.list2.length) {
          wx.showToast({
            title: `请选择${this.number}个`,
            icon: 'none', // 图标类型，可选值：'success', 'loading', 'none'
            duration: 2000, // 提示框显示时间，单位：毫秒
            mask: true // 是否显示透明蒙层，防止触摸穿透，默认为 false
          });
        } else {

          this.show = false
        }
      },
      // 删除弹筐里的人员
      tkdel(index) {
        this.list1.splice(index, 1)
      },
      // 编辑弹筐里的人员
      tkedit(index) {
        this.show = false
        this.show1 = true
      },
      // 删除选择之后的
      delitem(index) {
        this.list2.splice(index, 1)
      },
      addNumber() {
        this.number = this.number + 1
      },
      subNumber() {
        if (this.number > 1) {
          this.number = this.number - 1
        }
      },
      adduser() {
        this.show = false,
          this.show1 = true
      }
    }
  }
</script>

<style scoped lang="scss">
  .radio {
    width: 10rpx;
    height: 10rpx;
  }

  .home {
    background: #F5F5F5;
  }

  .content {
    margin: 48rpx 32rpx 20rpx;
    padding: 48rpx 32rpx;
    width: 686rpx;
    height: 442rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;

    .title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333333;
    }

    .details {
      display: flex;
      margin-top: 32rpx;

      >image {
        margin-right: 20rpx;
        width: 170rpx;
        height: 170rpx;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
      }

      .address {
        font-size: 24rpx;
        font-weight: 500;
        color: #333333;

        >view {
          margin-bottom: 10rpx;
        }
      }

    }

    .notification {
      margin-top: 15rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #999999;

      >view {
        margin-top: 7rpx;
      }
    }
  }

  // 请选择跟团人员的信息 
  .message {
    margin: 0rpx 32rpx 20rpx;
    width: 686rpx;
    height: 128rpx;
    line-height: 128rpx;
    text-align: center;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;

    >text {
      margin-left: 14rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #333333;
    }
  }

  // 跟团人数
  .number {
    display: flex;
    justify-content: space-between;
    margin: 0rpx 32rpx 20rpx;
    padding: 48rpx 44rpx;
    width: 686rpx;
    height: 124rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;

    .people_number {
      margin: 0 24rpx;
      vertical-align: top;
      font-size: 28rpx;
      font-weight: bold;
      color: #000000;
    }
  }

  // 其他项目
  .other {
    margin: 0rpx 32rpx 108rpx;
    padding: 48rpx 32rpx;
    width: 686rpx;
    // height: 436rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;

    .others {
      margin-left: 34rpx;
      margin-bottom: 34rpx;
      font-size: 28rpx;
      font-weight: bold;
      color: #000000;
    }

    .Recommended {
      position: relative;
      margin-bottom: 26rpx;
      width: 620rpx;
      height: 128rpx;

      >image {
        width: 100%;
        height: 100%;
      }

      .other_content {
        width: 570rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        top: 32rpx;
        left: 54rpx;
      }
    }

    .price {
      display: flex;
      align-items: center;
      color: #FF4A4A;
      font-size: 24rpx;

      >text {
        font-size: 32rpx;
        font-weight: bold;
        margin-right: 15rpx;
      }
    }
  }

  // 支付
  .payment {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    padding: 0 32rpx 0 64rpx;
    // width: 750rpx;
    height: 98rpx;
    background: #FFFFFF;
    border-radius: 0rpx 0rpx 0rpx 0rpx;

    .price1 {
      font-size: 32rpx;
      color: #EF5353;
      font-weight: bold;

      >text {
        font-size: 48rpx;
      }
    }

    .button {
      >button {

        width: 244rpx;
        height: 66rpx;
        line-height: 66rpx;
        background: linear-gradient(90deg, #FF7302 0%, #FF5210 100%);
        border-radius: 84rpx 84rpx 84rpx 84rpx;

        font-size: 28rpx;
        font-weight: bold;
        color: #FFFFFF;
      }
    }
  }

  // 选择人员弹出层
  .popup_content {
    padding: 0 32rpx 80rpx;

    .popup_add {
      margin-bottom: 16rpx;
      padding: 48rpx 0;
      text-align: center;
      border-bottom: 1rpx solid #eee;

      font-size: 32rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;

      >text {
        margin-left: 15rpx;
      }
    }

    .item {
      padding: 32rpx 0 32rpx 32rpx;
      display: flex;
      align-items: center;
      border-bottom: 1rpx solid #eee;

      .name {
        margin-bottom: 10rpx;
        font-size: 28rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
      }

      .Id_number {
        margin-right: 170rpx;
        font-size: 28rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
      }

      .controls {
        >image {
          margin-right: 36rpx;
          width: 28rpx;
          height: 28rpx;
        }
      }
    }

    // 没有人员显示
    .nonemessage {
      font-size: 40rpx;
      color: #a2a2a2;
      margin: 250rpx 0;
      text-align: center;
    }

    .verify {
      margin-top: 98rpx;
      width: 622rpx;
      height: 72rpx;
      line-height: 72rpx;
      background: linear-gradient(92deg, #F7D966 0%, #F2C51D 100%);
      border-radius: 82rpx 82rpx 82rpx 82rpx;

      font-size: 32rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
    }
  }

  // 添加跟团人员信息
  .user_information {
    padding: 72rpx 64rpx;

    .user_content {
      margin-bottom: 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      >text {
        font-size: 28rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        // color: #333333;
      }

      >input,
      >textarea {
        padding: 0 32rpx;
        width: 344rpx;
        height: 56rpx;
        background: #f9f9f9;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
      }

      >textarea {
        padding: 10rpx 32rpx
      }
    }

    .remark {
      font-size: 24rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #FF1212;
    }

    .save {
      margin-top: 52rpx;
      width: 622rpx;
      height: 72rpx;
      line-height: 72rpx;
      background: linear-gradient(92deg, #F7D966 0%, #F2C51D 100%);
      border-radius: 82rpx 82rpx 82rpx 82rpx;

      font-size: 32rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
    }
  }

  // 
  .peoples {
    margin: 20rpx 32rpx;
    border-radius: 20rpx;
    background-color: #fff;

    .peopleList {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 42rpx;
      border-bottom: 1rpx solid #eee;

      .people {

        .name {
          margin-bottom: 5rpx;
          font-size: 28rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
        }

        .sfzh {
          font-size: 28rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
        }
      }

      .listimage {
        >image {
          width: 28rpx;
          height: 28rpx;
        }
      }
    }
  }
</style>